import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('共享元素过度动画'),
        ),
        body: Column(
          children: [DialogWidget(), AlphaWidget()],
        ),
      ),
    );
  }
}

// 从底部弹出的打开方式
class DialogWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(
                builder: (content) {
                  return ModalPage();
                },
                // 要打开的页面是否为全屏Dialog，如果是则从底部弹出
                fullscreenDialog: true),
          );
        },
        child: Text('底部弹出'));
  }
}

// 渐变的打开新页面
class AlphaWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: () {
          Navigator.of(context).push(PageRouteBuilder(
              transitionDuration: Duration(seconds: 1),
              pageBuilder: (BuildContext context, Animation<double> animation,
                  Animation<double> secondaryAnimation) {
                return FadeTransition(
                  opacity: animation,
                  child: ModalPage(),
                );
              }));
        },
        child: Text('渐变打开'));
  }
}

// 让该页面从底部弹出
class ModalPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("modal"),
      ),
      body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.red,
          child: Text('modal')),
    );
  }
}
